@mixin box-shadow {
  box-shadow: 0 2px 18px 0 #eae6e6;
}

@mixin scroll-bar($width:8px, $height: 6px, $radius: 10px, $color: #bbb) {
  &::-webkit-scrollbar {
    width: $width;
    height: $height;
  }
  &::-webkit-scrollbar-thumb,
  &::-webkit-scrollbar-thumb:horizontal,
  &::-webkit-scrollbar-thumb:vertical {
    background-color: $color;
    border-radius: $radius;
  }
}

@mixin clearfix {
  &:before,
  &:after {
    content: " ";
    display: table;
  }
  &:after {
    clear: both;
  }
}

@mixin imageMask {
  position: relative;
  &:before {
    content: " ";
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all .3s;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  &:hover {
    &:before {
      opacity: .8;
    }
    span {
      opacity: 1;
      color: #fff;
      font-size: 12px;
    }
  }
  img {
    width: 100%;
    height: 100%;
    border: none;
    vertical-align: top;
  }
  span {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
    z-index: 10;
    transition: all 0.3s ease;
    cursor: pointer;
    color: #eee;
    opacity: 0;
  }
}
